<template>
	<div class="homePage">
		<div class="homePageAll">
			<div class="homeContent">
			<!-- 轮播图 -->
					<div class="home_swipper">
						<van-swipe :autoplay="3000">
						  <van-swipe-item v-for="(image, index) in images" :key="index">
						    <img v-lazy="image" />
						  </van-swipe-item>
						</van-swipe>
					</div>
				<!-- 快捷点餐 -->
					<div class="home_orderRapidly">
						<van-grid  direction="horizontal" :column-num="2">
						  <van-grid-item    class="left">
							  <template #icon="props" >
								  <router-link :to="{name:'orderPage'}"> <img src="@/assets/home/c7.png" /></router-link>
							   
							  </template>
							  </van-grid-item>
						<van-grid-item class="right" >
							  <template #icon="props"   >
								  <router-link :to="{name:'orderPage'}"> <img src="@/assets/home/c8.png" /></router-link>
							  </template>
							  </van-grid-item>
						</van-grid>
					</div>
				<!-- 我的积分 -->
				<van-row type="flex" class="title">
							  <van-col span="5" class="logo"><img src="@/assets/home/logo.jpg" alt=""></van-col>
							  <van-col span="15">
								  <h4>我的积分480</h4>
								  <p class="cards">可兑换优惠券及限量周边 ></p>
							  </van-col>
							 
							<van-col span="4" class="user"> 
							  <router-link :to="{name:'vipMaskPage'}">
								   <img src="@/assets/home/c6.png" alt="">
							  </router-link>
															 
							  <p class="mask">会员码</p>
							</van-col>
							</van-row>
				
					
					<!-- 推荐 -->
					<div class="tuijian">
						<van-grid direction="horizontal" :column-num="3">
						 <van-grid-item   >
						   <template #icon="props">
							   <router-link :to="{name:'creditPage'}">
								   <img src="@/assets/home/c3.png" /> 
							   </router-link>
						   
						   </template>
						</van-grid-item> 
						<van-grid-item   >
						   <template #icon="props">
							   <router-link :to="{name:'accountPage'}">
								   <img src="@/assets/home/c4.png" />
								   
							   </router-link>
						   </template>
						</van-grid-item> 
						<van-grid-item   >
						   <template #icon="props">
							   <router-link :to="{name:'discountPage'}">
								<img src="@/assets/home/c5.png" />
							   </router-link>
						  
						   </template>
						</van-grid-item>
						 
						</van-grid>
						
					</div>
					
				<van-row type="flex" class="new" gutter="8">
					<router-link :to="{name:'orderPage'}">
						  <van-col span="12"><img src="@/assets/home/c1.jpg" alt=""></van-col>
						 <van-col span="12"><img src="@/assets/home/c2.jpg" alt=""></van-col>
					</router-link>
							
							</van-row>
				
			</div>
				</div>
		
	</div>
</template>

<script>
	import Vue from 'vue';
	import { Swipe, SwipeItem,Lazyload,Grid, GridItem,Image as VanImage   } from 'vant';
	
	Vue.use(Swipe);
	Vue.use(SwipeItem);
	Vue.use(Lazyload);
	Vue.use(Grid);
	Vue.use(GridItem);
	Vue.use(VanImage);

export default{
	name:'homePage',
	data(){
		return{
		 current: 0,
		  images: [
		         require('@/assets/home/swiper1.jpg'),
		         require('@/assets/home/swiper2.jpg'),
		       
		       ],
		}
	},
		  methods: {
		    onChange(index) {
		      this.current = index;
		    },
			
		  }
}
</script>

<style scoped >
.homePageAll{
	background-color: #f8f6f9;
	
}
.home_swipper img{
	width:375px;
	height: 350px;
}
.homeContent{


	width: 375px;
padding-bottom: 50px;
}
.home_orderRapidly{
	margin: 10px;
	margin-top: -12px;
}

.home_orderRapidly .right{
		border-radius:0 10px 0 0 ;
		overflow: hidden;
}
.home_orderRapidly .left{
		border-radius:  10px 0 0 0; 
		overflow: hidden;
}

.tuijian{
	margin: 10px;
	height: 100px;
}
.tuijian img{
	width: 101px;
}

.van-swipe__indicator{
	width:8px;
	height:3px;
	margin-bottom: 10px;
	background-color:#989986;
}

.title{
	height:50px;
	padding:15px;
	margin: 10px;
	background:#fff;
	
}
.title .logo>img{
	width:50px;
	height:50px;
	border-radius:50%;
}
.title h4{
	margin-top: 0;
	text-align: left;
	
	
}
.title p{
	color:#999999;
	font-size:14px;
	
}
.title p.cards{
	margin-top:-10px;
	text-align: left;
}
.title p.mask{
	margin-top:-5px;
	
	text-align: center;
}
.title .user{
	text-align:center;
}

.new{
	margin: 10px;
	margin-top: 30px;
}
.new img{
	width:100%;
	height:130px;
	border-radius: 10px;
	box-shadow:0px 0px 10px #ccc;
}
</style>
